

<template>
  <div style="padding: 10px">
    <!--功能区-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="adduser">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>
    <!--搜索区-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" clearable style="width: 300px"></el-input>
      <el-button style="margin: 5px" type="primary" @click="load">查询</el-button>
    </div>

    <div style="width: 100%;">
      <el-table :data="tableData" border stripe style=";  padding: 10px;">
        <el-table-column prop="id" label="id" width="150" sortable>
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="100"></el-table-column>
        <el-table-column prop="gander" label="性别" width="100"></el-table-column>
        <el-table-column prop="age" label="年龄" width="100"></el-table-column>
        <el-table-column prop="address" label="地址" width="500"></el-table-column>
        <el-table-column prop="phone" label="电话" width="100"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="是否删除?" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button size="mini" type="danger" >删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>

      <!-- 新增用户弹窗 -->
      <el-dialog title="新增用户" v-model="dialogVisible" width="30%" >
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="name" style="width: 80%;">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="密码" style="width: 80%;">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="年龄" style="width: 80%;">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="性别" style="width: 80%;">
            <el-radio v-model="form.gander" label="男">男</el-radio>
            <el-radio v-model="form.gander" label="女">女</el-radio>
          </el-form-item>

          <el-form-item label="电话" style="width: 80%;">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="地址" style="width: 80%;">
            <el-input type="textarea" v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>

          <!--<el-form-item label="活动区域" label-width="80px">-->
          <!--  <el-select v-model="form.region" placeholder="请选择活动区域">-->
          <!--    <el-option label="区域一" value="shanghai"></el-option>-->
          <!--    <el-option label="区域二" value="beijing"></el-option>-->
          <!--  </el-select>-->
          <!--</el-form-item>-->

          <el-form-item>
            <el-button type="primary" @click="save">立即创建</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>


      </el-dialog>

      <!-- 修改用户信息 -->
      <el-dialog title="用户信息" v-model="dialogVisible_update" width="30%" >
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="name" style="width: 80%;">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="密码" style="width: 80%;">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="年龄" style="width: 80%;">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="性别" style="width: 80%;">
            <el-radio v-model="form.gander" label="男">男</el-radio>
            <el-radio v-model="form.gander" label="女">女</el-radio>
          </el-form-item>

          <el-form-item label="电话" style="width: 80%;">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="地址" style="width: 80%;">
            <el-input type="textarea" v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>

          <!--<el-form-item label="活动区域" label-width="80px">-->
          <!--  <el-select v-model="form.region" placeholder="请选择活动区域">-->
          <!--    <el-option label="区域一" value="shanghai"></el-option>-->
          <!--    <el-option label="区域二" value="beijing"></el-option>-->
          <!--  </el-select>-->
          <!--</el-form-item>-->

          <el-form-item>
            <el-button type="primary" @click="save">修改</el-button>
            <el-button @click="dialogVisible_update = false">取消</el-button>
          </el-form-item>
        </el-form>


      </el-dialog>

    </div>
  </div>
</template>
<script>


import request from "@/utils/request";

export default {
  name: 'Home',
  components: {

  },

  data() {
    return {
      form: {},

      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur',
          },
        ],
      },

      dialogVisible: false,
      dialogVisible_update: false,
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [

      ],

    }
  },

  created() {
    this.load()
  },

  methods: {
    load(){
      request.get("/api/user",
          {
            params: {
              pageNum: this.currentPage,
              pageSize: this.pageSize,
              search: this.search,
            }
          }).then(res => {
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },

    adduser(){
      this.dialogVisible = true;
      this.form = {};
    },

    save(){
      if (this.form.id){ //更新
        request.put("/api/user",this.form).then(res => {
          console.log(res);
          if(res.status === '0'){
            this.$message({
              type: "success",
              message: "修改成功!"
            })
          }else {
            this.$message({
              type: "error",
              message: "修改失败!"
            })
          }
          this.load(); //更新数据
          this.dialogVisible_update = false

        })
      }else { //新增
        request.post("/api/user",this.form).then(res => {
          console.log(res);
          if(res.status === '0'){
            this.$message({
              type: "success",
              message: "新增成功!"
            })
          }else {
            this.$message({
              type: "error",
              message: "新增失败!"
            })
          }
          this.load(); //更新数据
          this.dialogVisible = false
        })
      }

    },
    resetForm(){
      this.form = {}
    },

    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row)); //深拷贝
      this.dialogVisible_update = true;
    },

    handleSizeChange(pageSize){
      //改变每页条数触发
      this.pageSize = pageSize
      this.load()
    },

    handleCurrentChange(pageNum){
      //改变当前页时出发、
      this.currentPage = pageNum
      this.load()
    },

    handleDelete(id){
      request.delete("/api/user/"+id).then(res => {
        if(res.status === '0'){

          this.$message({
            type: "success",
            message: "删除成功!"
          })
        }else {
          this.$message({
            type: "error",
            message: "删除失败!"
          })
        }
        this.load(); //更新数据
      })
    }

  }
}
</script>
